// 分模块，分作用域书写JQ代码

// 监控区域代码
(function () {
    // 1. 给筛选按钮设置点击事件
    $('.monitor a').on('click', function () {
        // 2. 让当前点击的a添加样式，其它的移除
        $(this).addClass('active').siblings().removeClass('active')
        // 3. 获取当前点击的按钮的索引
        let idx = $(this).index()
        // 让对应索引的content盒子显示，其它的隐藏
        $('.monitor .content').eq(idx).show().siblings('.content').hide()
    })
    // 4. 复制一份row数据，添加到尾部
    $('.marquee').each(function (index, value) {
        // 5. 将所有的子元素复制
        let rows = $(value).children().clone()
        // 6. 将其追加到父元素中
        $(value).append(rows)
    })
})();

// 点位分布区域代码
(function () {
    // 1. 实例化echarts图表对象
    let myChart = echarts.init($('.pie')[0])
    let option = {
        // 修改玫瑰图花瓣的颜色
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        tooltip: {},
        series: [{
            name: '城市占比',
            type: 'pie',
            // 修改饼状图内圆与外圆的大小
            radius: ['10%', '70%'],
            center: ['50%', '50%'],
            // 把饼状图的显示模式改为半径模式
            roseType: 'radius',
            itemStyle: {
                borderRadius: 5
            },
            label: {
                fontSize: 10
            },
            // 修改引导线的长度
            labelLine: {
                // 链接饼图的线长
                length: 6,
                // 链接文字的线长
                length2: 8
            },
            // 修改data里的数据
            data: [{
                    value: 20,
                    name: '云南'
                },
                {
                    value: 26,
                    name: '北京'
                },
                {
                    value: 24,
                    name: '山东'
                },
                {
                    value: 25,
                    name: '河北'
                },
                {
                    value: 20,
                    name: '江苏'
                },
                {
                    value: 25,
                    name: '浙江'
                },
                {
                    value: 30,
                    name: '四川'
                },
                {
                    value: 40,
                    name: '湖北'
                }
            ]
        }]
    };
    // 3. 将配置项数据指定到容器中
    myChart.setOption(option)
    // 4. 设置图表跟随屏幕变化
    // 监听屏幕的宽度变化，图表自动适配
    window.addEventListener('resize', function () {
        // 图表自适应
        myChart.resize()
    })
})();

// 用户统计模块代码
(function () {
    // 1. 实例化echarts图表对象
    let myCharts = echarts.init($('.bar')[0])
    // 1.5 单独声明一个对象结构,保存三根省略柱子的样式
    let item = {
        name: '',
        value: 1200,
        // 设置柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        },
    }
    // 2. 设置配置项数据
    let option = {
        // 1. 设置柱子的背景渐变色
        color: new echarts.graphic.LinearGradient(
            // 点(x1,x1) 到 点(x2,y2)之间进行渐变
            0, 0, 0, 1,
            [{
                    offset: 0,
                    color: 'gold'
                }, // 0 代表起始颜色
                {
                    offset: 1,
                    color: 'red'
                } // 1 代表结束颜色
            ]
        ),
        // 提示组件
        tooltip: {
            trigger: 'item'
        },
        // 控制图表大小
        grid: {
            top: '4%',
            tight: '3%',
            bottom: '3%',
            left: '0%',
            // 控制以 文字/坐标轴 为边界   true文字  false坐标轴
            containLabel: true,
            // 是否显示网格
            show: true,
            // 设置网格边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: {
            type: 'category',
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            // 设置X轴相关属性
            axisTick: {
                // 调整刻度的位置
                alignWithLabel: true, // true 刻度显示在柱子中间，false 刻度显示在两根柱子之间
                // 不显示刻度
                show: false
            },
            // 调整刻度的文本样式
            axisLabel: {
                color: '#4c9bfd'
            },
            // X轴坐标轴颜色设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, .3)',
                    // width:8,  // x轴线的粗细
                    // opacity: 0,   如果不想显示x轴线 则改为 0
                }
            }
        },
        // 控制Y轴相关的属性
        yAxis: {
            type: 'value',
            // 刻度设置
            axisTick: {
                // 不显示刻度
            },
            // Y轴坐标文字样式修改
            axisLabel: {
                color: '#4c9bfd'
            },
            // Y坐标轴颜色
            axisTick: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            },
            // Y轴分割线的样式
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            }
        },
        series: [{
            data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
            type: 'bar',
            // 修改柱子的宽度
            barWidth: '58%'
        }]
    };
    // 3. 将配置项数据设置给容器
    myCharts.setOption(option);
    // 4. 监听屏幕的宽度变化，自动化适配图表
    window.addEventListener('resize', function () {
        myCharts.resize()
    })
})();

// 订单模块代码
(function () {
    // 0. 准备假数据
    // 数组: 通过下标对应
    // 对象: 通过成员名对应
    let data = {
        day365: {
            orders: '20,301,987',
            amount: '99834'
        },
        day90: {
            orders: '301,987',
            amount: '9834'
        },
        day30: {
            orders: '1,987',
            amount: '3834'
        },
        day1: {
            orders: '987',
            amount: '834'
        }
    }
    // 1. 给筛选按钮设置点击事件
    $('.filter a').on('click', function () {
        // 2. 给当前按钮添加类名，兄弟元素移除类名
        $(this).addClass('active').siblings().removeClass('active')
        // 3. 获取当前a标签的自定义属性
        let flag = $(this).attr('flag')
        // 4. 获得对应的数据内容
        // 不确定的对象成员，必须用[]获得
        // 将获取到的自定义属性当做成员赋给data对象，并声明一个变量接收
        let flagData = data[flag]
        // 5. 将对应的数据渲染到指定结构
        $('.order h4').eq(0).text(flagData.orders)
        $('.order h4').eq(1).text(flagData.amount)

        // 10. 鼠标点击时，把当前按钮的下标赋值给idx
        // 点击后，应该在点击位置开始轮播，而不是跳回点击前的位置进行轮播
        idx = $(this).index()
    })
    // 6. 设置计时器，让a标签自动轮播  核心: 按钮的下标自增
    // 声明一个变量，记录按钮的下标
    let idx = 0
    let timerID = setInterval(function () {
        idx++
        // 7. 限制idx的范围
        if (idx > 3) idx = 0
        // 8. 调用对应下标的按钮的点击事件
        $('.filter a').eq(idx).click()
    }, 1500)
    // 9. 设置移入移出事件
    $('.order').on('mouseenter', function () {
        clearInterval(timerID) // 鼠标移入时清除计时器
    }).on('mouseleave', function () {
        // 鼠标移出重新生成计时器
        timerID = setInterval(function () {
            idx++
            // 7. 限制idx的范围
            if (idx > 3) idx = 0
            // 8. 调用对应下标的按钮的点击事件
            $('.filter a').eq(idx).click()
        }, 1500)
    })
    /* // 拓展: hover事件
    $('.order').hover(
        // 移入时执行
        function () {
            clearInterval(timerID)
        },
        // 移出时执行
        function () {
            // 鼠标移出重新生成计时器
            timerID = setInterval(function () {
                idx++
                // 7. 限制idx的范围
                if (idx > 3) idx = 0
                // 8. 调用对应下标的按钮的点击事件
                $('.filter a').eq(idx).click()
            }, 1500)
        }
    ) */
})();

// ---------------------销售统计区域js代码
(function () {
    // 0. 提前准备好所有假数据
    let saleData = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }

    // 1. 给筛选按钮设置点击事件
    $('.caption a').on('click', function () {
        // 2. 当前按钮设置类名,兄弟元素移除类名
        $(this).addClass('active').siblings('a').removeClass('active');

        // 6. 点击a标签的时候,将index与buttonIndex同步
        // 小坑: 你以为a标签的下标是0 1 2 3 
        // 真相: 正确的a标签下标是1 2 3 4
        buttonIndex = $(this).index() - 1;

        // 10. 获得当前按钮的自定义属性,获得对应的数据
        let flagData = saleData[$(this).attr('flag')];

        // 11. 将数据赋值给图表-->option-->series数组-->第0项以及第1项的data
        option.series[0].data = flagData[0];
        option.series[1].data = flagData[1];

        // 12. 重新加载配置项数据
        myCharts.setOption(option);
    })

    // 3. 设置定时器,轮流点击筛选按钮
    let buttonIndex = 0;
    let timeID = setInterval(function () {
        buttonIndex++;
        if (buttonIndex > 3) buttonIndex = 0;
        // 4. 让对应的a标签调用点击事件
        $('.caption a').eq(buttonIndex).click();
    }, 1500)

    // 5. 利用hover事件停止/加载定时器
    $('.sales').hover(
        function () {
            clearInterval(timeID);
        },
        function () {
            timeID = setInterval(function () {
                buttonIndex++;
                if (buttonIndex > 3) buttonIndex = 0;
                $('.caption a').eq(buttonIndex).click();
            }, 1500)
        }
    )

    // 7. 实例化图表对象
    let myCharts = echarts.init(document.querySelector('.line'));

    // 8. 准备配置项数据
    let option = {
        // 设置网格样式
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true, // 显示边框
            borderColor: '#012f4a', // 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        // 图例组件
        legend: {
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            right: '10%' // 距离右边10%
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            },
            boundaryGap: false // 去除轴内间距
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        color: ['red', 'gold'],
        series: [{
                name: '黑马程序员',
                data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                type: 'line',
                smooth: true
            },
            {
                name: '前端79期',
                data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
                type: 'line',
                smooth: true
            }
        ]
    };
    // 9. 将配置项数据指定给容器
    myCharts.setOption(option);
    window.addEventListener('resize', function () {
        myCharts.resize()
    })
})();

// 渠道模块
(function () {
    // 1. 实例化图表对象
    let myChart = echarts.init($('.radar')[0])
    // 2. 准备配置项数据
    option = {
        tooltip: {
            show: true,
            // 控制提示组件的显示位置
            position: ['45%', '-5%']
        },
        radar: {
            shape: 'circle',
            center: ['50%', '50%'],
            // 外半径占据容器的大小
            radius: '60%',
            // 设置指示器的分割线数量
            splitNumber: 4,
            // 设置分割线的样式
            splitLine: {
                // 分割线颜色
                lineStyle: {
                    color: 'rgba(255,0,255,0.7)',
                    // 分割线类型
                    type: 'dashed'
                },
            },
            // 坐标轴的轴线相关样式
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            name: {
                // 修饰雷达图文本颜色
                textStyle: {
                    color: '#f90',
                    fontSize: 10,
                    padding: -5
                }
            },
            indicator: [{
                    name: 'DEF',
                    max: 1000
                },
                {
                    name: 'STR',
                    max: 1000
                },
                {
                    name: 'MP',
                    max: 1000
                },
                {
                    name: 'HP',
                    max: 1000
                },
                {
                    name: 'AVD',
                    max: 1000
                }
            ],
        },
        series: [{
            type: 'radar',
            areaStyle: {
                color: 'rgba(238, 197, 102, 0.6)',
            },
            // 线条样式
            lineStyle: {
                normal: {
                    color: '#fff',
                }
            },
            // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
            symbol: 'circle',
            // 拐点的大小  
            symbolSize: 6,
            // 小圆点（拐点）设置为白色
            itemStyle: {
                color: '#fff'
            },
            // 在圆点上显示相关数据
            label: {
                show: false,
                color: '#fff',
                fontSize: 10
            },
            data: [{
                value: [1000, 1000, 1000, 1000, 1000],
                name: '御清绝'
            }]
        }]
    };
    myChart.setOption(option)
    window.addEventListener('resize', function () {
        myChart.resize()
    })
})();

// 进度模块
(function () {
    // 1. 实例化echarts图表对象
    let myCharts = echarts.init(document.querySelector('.gauge'))
    // 2. 准备配置项数据
    let option = {
        series: [{
            type: 'pie',
            radius: ['126%', '145%'],
            center: ['48%', '74%'],
            avoidLabelOverlap: false,
            labelLine: {
                show: false
            },
            startAngle: 180,
            hoverOffset: 0,
            data: [{
                value: 75,
                itemStyle: {
                    // 设置第一条数据颜色渐变#00c9e0->#005fc1
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0,
                                color: "#00c9e0"
                            }, // 0 起始颜色
                            {
                                offset: 1,
                                color: "#005fc1"
                            } // 1 结束颜色
                        ]
                    )
                }
            }, {
                value: 25,
                itemStyle: {
                    color: '#132f4d'
                }
            }, {
                value: 100,
                // 将第三条数据改为透明色
                itemStyle: {
                    color: 'transparent'
                }
            }, ]
        }]
    }
    // 3. 将配置项数据指定给容器
    myCharts.setOption(option)
    // 4. 让图表跟随浏览器变化
    window.addEventListener('resize', function () {
        myCharts.resize()
    })
})();

// 省市热销排行模块
(function () {
    // 1. 准备每个城市的假数据
    let hotData = [{
        city: '北京', // 城市
        sales: '25,179', // 销售额
        flag: true, //  上升还是下降
        // 以上是外层的城市数据

        brands: [
            //  品牌种类数据
            {
                name: '可爱多',
                num: '9,086',
                flag: true
            },
            {
                name: '娃哈哈',
                num: '8,341',
                flag: true
            },
            {
                name: '喜之郎',
                num: '7,407',
                flag: false
            },
            {
                name: '八喜',
                num: '6,080',
                flag: false
            },
            {
                name: '小洋人',
                num: '6,724',
                flag: false
            },
            {
                name: '好多鱼',
                num: '2,170',
                flag: true
            }
        ]
    },
    {
        city: '河北',
        sales: '23,252',
        flag: false,
        brands: [{
            name: '可爱多',
            num: '3,457',
            flag: false
        },
        {
            name: '娃哈哈',
            num: '2,124',
            flag: true
        },
        {
            name: '喜之郎',
            num: '8,907',
            flag: false
        },
        {
            name: '八喜',
            num: '6,080',
            flag: true
        },
        {
            name: '小洋人',
            num: '1,724',
            flag: false
        },
        {
            name: '好多鱼',
            num: '1,170',
            flag: false
        }
        ]
    },
    {
        city: '上海',
        sales: '20,760',
        flag: true,
        brands: [{
            name: '可爱多',
            num: '2,345',
            flag: true
        },
        {
            name: '娃哈哈',
            num: '7,109',
            flag: true
        },
        {
            name: '喜之郎',
            num: '3,701',
            flag: false
        },
        {
            name: '八喜',
            num: '6,080',
            flag: false
        },
        {
            name: '小洋人',
            num: '2,724',
            flag: false
        },
        {
            name: '好多鱼',
            num: '2,998',
            flag: true
        }
        ]
    },
    {
        city: '江苏',
        sales: '23,252',
        flag: false,
        brands: [{
            name: '可爱多',
            num: '2,156',
            flag: false
        },
        {
            name: '娃哈哈',
            num: '2,456',
            flag: true
        },
        {
            name: '喜之郎',
            num: '9,737',
            flag: true
        },
        {
            name: '八喜',
            num: '2,080',
            flag: true
        },
        {
            name: '小洋人',
            num: '8,724',
            flag: true
        },
        {
            name: '好多鱼',
            num: '1,770',
            flag: false
        }
        ]
    },
    {
        city: '山东',
        sales: '20,760',
        flag: true,
        brands: [{
            name: '可爱多',
            num: '9,567',
            flag: true
        },
        {
            name: '娃哈哈',
            num: '2,345',
            flag: false
        },
        {
            name: '喜之郎',
            num: '9,037',
            flag: false
        },
        {
            name: '八喜',
            num: '1,080',
            flag: true
        },
        {
            name: '小洋人',
            num: '4,724',
            flag: false
        },
        {
            name: '好多鱼',
            num: '9,999',
            flag: true
        }
        ]
    }
    ]
    // 2. 根据城市数据，生成城市列表结构
    let htmlSup = ''
    $.each(hotData, function (index, value) {
        htmlSup += `<li>
                    <span>${value.city}</span>
                    <span>${value.sales} 
                        <s class="${value.flag ? 'icon-up' : 'icon-down'}"></s>
                    </span>
                  </li>`
    })
    // 3. 将生成的标签结构渲染到容器中
    $('.sup').html(htmlSup)

    let idx = 0 // 声明一个变量用于接收当前点击的li标签的下标; 变量的初始值为0,也可用于记录计时器的点击次数

    // 4. 给城市列表li标签添加点击事件
    $('.sup li').click(function () {
        // 5. 给当前点击的li标签添加样式，其余的li标签移除样式
        $(this).addClass('active').siblings().removeClass('active')

        // 7. 获得当前的被选中城市的品牌热销数据
        // 利用下标获得当前点击的城市的对应数据
        idx = $(this).index()
        let brandsData = hotData[idx].brands

        // 8. 用获得的热销品牌数据，生成对应的标签结构
        let htmlSub = ''
        $.each(brandsData, function (index, value) {
            htmlSub += `<li>
                    <span>${value.name}</span>
                    <span>${value.num}
                        <s class="${value.flag ? 'icon-up' : 'icon-down'}"></s>
                    </span>
                  </li>`
        })
        // 9. 将生成的标签结构渲染到容器中
        $('.sub').html(htmlSub)
    })
    // 6. 调用点击事件，先生成一个标签结构
    $('.sup li').eq(0).click()

    // 10. 给sub中的li标签设置计时器
    let timerID = setInterval(function () {
        idx++
        // 11. 限制idx的范围
        if (idx > 4) idx = 0
        $('.sup li').eq(idx).click()
    }, 1800)

    // 12. 给province标签设置移入移出事件
    $('.province').hover(
        // 鼠标移入时清除计时器
        function () {
            clearInterval(timerID)
        },
        // 鼠标移出时重新生成计时器
        function () {
            timerID = setInterval(function () {
                idx++
                if (idx > 4) idx = 0
                $('.sup li').eq(idx).click()
            }, 1800)
        }
    )
})();

